<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      数组去重 : 去除数组内重复项
    */

    // 原始数组
    // var arr = [ 1, 2, 3, 4, 3, 2, 1, 3, 4, 2, 1, 5, 6, 4, 3, 2, 5 ]
    // console.log('原始数组 : ', arr)



    // 方案1:
    // 拿到第一个和后面进行比较, 如果有一样的就删除一个
    // for (var i = 0; i < arr.length; i++) {
    //   // arr[i] 就是数组内的每一个数据
    //   // arr[0] === 1
    //   // 从 [1] 开始向后查找, 只要后面还有 1 这个数据, 那么把后面的删除了
    //   //  不确定后面还有几个 1, 只要有一个就要删除一个
    //   //  当后面还有 1 的时候, 就删除一个, 否则继续循环 i++
    //   var n = i + 1
    //   while (n < arr.length) {
    //     if (arr[i] === arr[n]) {
    //       arr.splice(n, 1)
    //       i--
    //     }
    //     n++
    //   }
    // }

    // 方案2:
    // includes()
    // 语法: 数组.includes(数据)
    // 作用: 判断数组内是否有该数据
    // 返回值: 布尔值
    //   true, 说明有
    //   false, 说明没有

    // 准备一个空数组
    // 把原始数组进行遍历, 依次插入到新数组内
    // 在插入之前进行一个判断, 新数组内有这个数据, 就不插入, 没有才插入
    // var newarr = []
    // for (var i = 0; i < arr.length; i++) {
    //   // arr[i] 是数组内的每一个数据
    //   // 如果从 arr[1] 开始后面还有 1 这个数据, 那么删除一个
    //   if (!newarr.includes( arr[i] )) {
    //     newarr.push(arr[i])
    //   }
    // }

    // console.log('去重之后 : ', newarr)


    // 方案3:
    // 计数排序前半部分 + 遍历新数组, 每个索引插入一个
    // var arr = [ 1, 2, 3, 4, 3, 2, 1, 3, 4, 2, 1, 5, 6, 4, 3, 2, 5, 9 ]
    // console.log('原始数组 : ', arr)

    // var newarr = []
    // for (var i = 0; i < arr.length; i++) newarr[ arr[i] ] = arr[i]
    // // 把 newarr 中为 undefined 的干掉
    // for (var i = 0; i < newarr.length; i++) {
    //   if (!newarr[i]) {
    //     newarr.splice(i, 1)
    //     i--
    //   }
    // }
    // console.log(newarr)

    // 方案4:
    // 使用 sort 排序
    // 判断紧挨着的两个是否一样, 如果一样, 删除一个
    // var arr = [ 1, 2, 3, 4, 10, 3, 2, 11, 1, 3, 4, 2, 11, 1, 10, 5, 6, 4, 3, 2, 5, 9 ]
    // console.log('原始数组 : ', arr)

    // arr.sort()
    // console.log('排序之后 : ', arr)
    // // 遍历
    // for (var i = 0; i < arr.length; i++) {
    //   // 判断当前和下一个一样
    //   if (arr[i] === arr[i + 1]) {
    //     arr.splice(i, 1)
    //     i--
    //   }
    // }
    // console.log('去重之后 : ', arr)


    // 方案5: 和方案3一致, 使用对象
    // var arr = [ 1, 2, 3, 4, 10, 3, 2, 11, 1, 3, 4, 2, 11, 1, 10, 5, 6, 4, 3, 2, 5, 9 ]
    // console.log('原始数组 : ', arr)

    // 准备一个新的对象
    // var obj = {}
    // for (var i = 0; i < arr.length; i++) obj[ arr[i] ] = '随便'
    // // 把对象内的每一个索引当做 数据 插入到数组内
    // var newarr = []
    // for (var k in obj) {
    //   newarr.push(k - 0)
    // }
    // console.log(newarr)

    // 6. Set()
    // Set 是一个 js 内的数据结构, 长得和数组差不多
    // 特点: 不接受重复数据
    // 语法:
    //   创建空 Set: var s = new Set()
    // var s = new Set()
    // console.log(s)
    //   创建带有数据的 Set: var s = new Set([ 数据1, 数据2, 数据3 ])
    // var s = new Set([ 1, 2, 3, 1, 2, 3 ])
    // console.log(s)

    var arr = [ 1, 2, 3, 4, 10, 3, 2, 11, 1, 3, 4, 2, 11, 1, 10, 5, 6, 4, 3, 2, 5, 9 ]
    console.log('原始数组 : ', arr)

    // 利用 Set 数据结构
    // var s = new Set(arr)
    // console.log(s)

    // // 把 Set 数据结构转换会数组数据类型
    // // 方法1: Array.from()
    // var res1 = Array.from(s)
    // console.log(res1)
    // // 方案2: 展开运算符(...)
    // var res2 = [ ...s ]
    // console.log(res2)

    var r1 = Array.from( new Set(arr) )
    console.log(r1)
    var r2 = [ ...new Set(arr) ]
    console.log(r2)

  </script>
</body>
</html>
